<template>
  <div class='app-main'>
    <!-- vue3路由缓存？？ -->
    <router-view v-slot={Component}>
      <transition name="fade-transform"
                  mode="out-in">
        <keep-alive :include="cachedViews">
          <component :is="Component"
                     :key="key"></component>
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts">
import { useStore } from '@/store';
import { computed, defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'appMain',
  setup() {
    const store = useStore();
    const route = useRoute();
    const key = computed(() => route.path);
    // 缓存路由集合 暂时先是空数组 后面会放到store
    // const cachedViews = ref([])
    const cachedViews = computed(() => store.state.tagsView.cachedViews);
    return { key, cachedViews };
  }
});
</script>

<style lang="scss" scoped>
.app-main {
  /* navbar 50px  */
  min-height: calc(100vh - 50px);
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
